<template>
    <div class="common-layout">
      <el-container id="common-mian">

        <el-container>
          <el-header style="background-color:#E6E7F9; z-index: 1;">
            <headerIndex></headerIndex>
          </el-header>

          <el-main style="overflow: hidden;">
            <router-view></router-view>
          </el-main>

          <el-footer style="background-color: #E6E7F9; z-index: 1; ">
            <footerIndex></footerIndex>
          </el-footer>
        </el-container>
        <el-aside width="240px" style="background-color: #F9FAFF; z-index: 1;">
          <asideIndex></asideIndex>
        </el-aside>
      </el-container>
    </div>
  </template>
  
<script setup>
import headerIndex from "./components/header/index.vue"
import footerIndex from "./components/footer/index.vue"
import asideIndex from "./components/asider/index.vue"
import { computed, ref } from "vue";
import {useStore,mapState} from "vuex";
const usestore = useStore();
let {name} = usestore.state
</script>

<style scoped>
.common-layout{
    height: 100%;
    width: 100%;

}
#common-mian{
    height: 100%;
    width: 100%;
}
</style>